<template>
    <div class="tab-panel">
      <h2>Epic游戏商城</h2>
      <div v-if="epicData.loading" class="loading">
        正在加载免费游戏信息...
      </div>
      <div v-else-if="epicData.error" class="error">
        {{ epicData.error }}
      </div>
      <div v-else class="epic-content" style="justify-content: center">
        <div class="epic-section">
          <h3>当前免费</h3>
          <div class="epic-list">
            <div
                class="epic-item"
                v-for="(item, index) in currentFreeGames"
                :key="index"
            >
              <img :src="item.cover" :alt="item.title" class="cover" />
              <div class="epic-item-content">
                <h4 class="title">{{ item.title }}</h4>
                <p class="description">{{ item.description }}</p>
                <div class="price-info">
                  <span class="original-price">原价: ¥{{ item.original_price }}</span>
                  <span class="free-tag" v-if="item.is_free_now">当前免费</span>
                </div>
                <div class="free-time">
                  免费时间: {{ formatTime(item.free_start) }} - {{ formatTime(item.free_end) }}
                </div>
                <a :href="item.link" target="_blank" rel="noopener noreferrer" class="get-btn">
                  立即获取
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="epic-section">
          <h3>即将免费</h3>
          <div class="epic-list">
            <div
                class="epic-item upcoming"
                v-for="(item, index) in upcomingFreeGames"
                :key="index"
            >
              <img :src="item.cover" :alt="item.title" class="cover" />
              <div class="epic-item-content">
                <h4 class="title">{{ item.title }}</h4>
                <p class="description">{{ item.description }}</p>
                <div class="price-info">
                  <span class="original-price">原价: ¥{{ item.original_price }}</span>
                  <span class="free-tag upcoming-tag">即将免费</span>
                </div>
                <div class="free-time">
                  免费时间: {{ formatTime(item.free_start) }} - {{ formatTime(item.free_end) }}
                </div>
                <a :href="item.link" target="_blank" rel="noopener noreferrer" class="get-btn">
                  查看详情
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { API_BASE_URL } from '../utils/WebConstants.ts';

const epicData = ref({
  loading: true,
  error: null as string | null,
  data: [] as any[],
});

// 获取当前免费游戏
const currentFreeGames = computed(() => {
  return epicData.value.data.filter((item: any) => item.is_free_now);
});

// 获取即将免费游戏
const upcomingFreeGames = computed(() => {
  return epicData.value.data.filter((item: any) => !item.is_free_now);
});

// 格式化时间
const formatTime = (timeStr: string) => {
  return timeStr.replace(/\//g, '-').replace(' ', '\n');
};

// 获取Epic游戏数据
const fetchEpic = async () => {
  try {
    epicData.value.loading = true;
    epicData.value.error = null;
    const response = await fetch(`${API_BASE_URL}/epic`);
    const data = await response.json();

    if (data.code === 200) {
      epicData.value.data = data.data;
    } else {
      epicData.value.error = '获取Epic游戏信息失败';
    }
  } catch (err) {
    epicData.value.error = '网络错误，请稍后重试';
    console.error('获取Epic游戏信息时出错:', err);
  } finally {
    epicData.value.loading = false;
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchEpic();
});
</script>

<style scoped>
.tab-panel {
  max-width: 1200px;  /* 根据实际需求调整最大宽度 */
  margin: 0 auto;     /* 水平居中 */
}

.tab-panel h2 {
  text-align: center;
  margin-bottom: 20px;
  color: white;
}

.tab-panel h3 {
  color: white;
  border-left: 4px solid #42b983;
  padding-left: 10px;
  margin: 20px 0;
}

.loading, .error {
  text-align: center;
  padding: 40px 20px;
  font-size: 1.2rem;
}

.loading {
  color: #ccc;
}

.error {
  color: #d32f2f;
}

.epic-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.epic-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
}

.epic-item {
  background: #2d2d2d;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s;
}

.epic-item:hover {
  transform: translateY(-5px);
}

.epic-item.upcoming {
  opacity: 0.8;
}

.cover {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.epic-item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.title {
  color: white;
  font-size: 1.1rem;
  margin: 0;
}

.description {
  color: #ccc;
  font-size: 0.9rem;
  flex: 1;
}

.price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  font-size: 0.9rem;
}

.free-tag {
  background-color: #42b983;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
}

.upcoming-tag {
  background-color: #ff9800;
}

.free-time {
  color: #999;
  font-size: 0.8rem;
  white-space: pre-line;
}

.get-btn {
  display: block;
  background-color: #42b983;
  color: white;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s;
}

.get-btn:hover {
  background-color: #359c6d;
}

@media (max-width: 768px) {
  .epic-list {
    grid-template-columns: 1fr;
  }

  .epic-item {
    padding: 12px;
  }
}
</style>
